import { Button, Input } from 'antd';
import { memo, useState } from 'react';
// import Search from '@/components/inputs/Search';
import { SearchOutlined } from '@ant-design/icons';
import { useDebounceFn } from 'ahooks';

interface Props {
  className?: string;
  onChange?: (value: string) => void;
  onInsert?: () => void;
  delay?: number;
}

const CollectionHeader = ({ className, onChange, onInsert, delay = 300 }: Props) => {
  const [value, setValue] = useState('');
  const { run } = useDebounceFn(
    () => {
      onChange && onChange(value);
    },
    {
      wait: delay,
    },
  );

  return (
    <div className={`${className} mr-4 flex`}>
      <Input
        // style={{ border: 'none', background: '#F5F7FB' }}
        placeholder="搜索..."
        // className="mb-2 text-sm"
        value={value}
        suffix={<SearchOutlined style={{ color: '#C9CEE2', marginRight: '10px' }} />}
        onChange={(e) => {
          setValue(e.target.value);
          run();
        }}
      />

      {/* <Button type="text" onClick={onInsert}>插入</Button> */}
    </div>
  );
};

export default memo(CollectionHeader);
